import { CommonModal } from "@/views/components/CommonModal";
import { CommonTable } from "@/pages/OrderModule/common/components/CommonTable";
import { Alert, Button, Space, Typography, message, Popconfirm } from "antd";
import { ENABLED_NUM_STATUS, getArrayItem } from "@/views/utils/constant";
import React, { useEffect, useState } from "react";
import AttrViewModal from "./AttrViewModal";
import { cloneDeep } from "lodash";
import {
	getGoodsAttribute,
	delGoodsAttributeStatus,
	updateGoodsAttributeStatus,
	getGoodsAttributeInfo
} from "../../../../service";
const { Text } = Typography;
function GoodsList({ attrList, getAttrList, setDialogName, setDetails, oldAttrList }) {
	const handleEdit = id => {
		getGoodsAttributeInfo({ id }).then(res => {
			if (res.success) {
				setDetails(res.data);
				setDialogName("AttrViewModal");
			}
		});
	};
	const handleStatus = (id, status, index) => {
		updateGoodsAttributeStatus({
			id,
			status
		}).then(res => {
			if (res.success) {
				// 清除修改状态项的value值,否则表单会有之前填写的数据
				message.success(res.msg);
				const list = cloneDeep(oldAttrList);
				console.log(list[index]);
				list[index].value = null;
				getAttrList([...list]);
			}
		});
	};
	const handleDel = record => {
		delGoodsAttributeStatus(record.id).then(res => {
			if (res.success) {
				message.success("删除成功！");
				getAttrList();
			}
		});
	};
	const columns = [
		{
			title: "序号",
			dataIndex: "index",
			width: 60,
			render(text, record, index) {
				return index + 1;
			}
		},
		{
			title: "属性名称",
			dataIndex: "attributeName",
			key: "attributeName",
			width: 90
		},
		{
			title: "输入框样式",
			dataIndex: "type",
			key: "type",
			width: 100,
			render: (value, record) => {
				return <>{value == 1 ? "下拉框" : "文本框"}</>;
			}
		},
		{
			title: "属性值",
			dataIndex: "attributeValue",
			key: "attributeValue",
			width: 100
		},
		{
			title: "可用状态",
			dataIndex: "status",
			key: "status",
			width: 80,
			render: (value, record) => (
				<Text key={record.id} type={getArrayItem(ENABLED_NUM_STATUS, value)?.type}>
					{getArrayItem(ENABLED_NUM_STATUS, value)?.label}
				</Text>
			)
		},
		{
			title: "操作",
			dataIndex: "oprea",
			key: "oprea",
			width: 120,
			render(_, record, index) {
				return (
					<>
						<Button
							key={record.id + "edit"}
							type="link"
							disabled={["商品成分", "自定义属性"].includes(record.name)}
							onClick={() => {
								handleEdit(record.id);
							}}
						>
							编辑
						</Button>
						<Button
							key={record.id + "status"}
							type="link"
							disabled={["商品成分", "自定义属性"].includes(record.name)}
							onClick={() => {
								handleStatus(record.id, record.status ? 0 : 1, index);
							}}
						>
							{record.status ? "禁用" : "启用"}
						</Button>
						{record.unableDel != 0 && (
							<Popconfirm
								key={record.id + "Popcon"}
								title="是否确定删除？"
								onConfirm={() => {
									handleDel(record);
								}}
							>
								<Button key={record.id + "delete"} type="link">
									删除
								</Button>
							</Popconfirm>
						)}
					</>
				);
			}
		}
	];

	return (
		<CommonTable
			key="AttrClassifyModal"
			rowKey="id"
			bordered
			style={{ marginTop: 16 }}
			dataSource={attrList}
			columns={columns}
			pagination={false}
			scroll={{ y: `calc(100vh - 400px)` }}
		/>
	);
}

/** 维护分类属性 */
function MaintainClassificationAttributes(props) {
	const { onCancel } = props;
	// const [dataSource, setDataSource] = useState([]);
	const [dialogName, setDialogName] = useState("");
	const [details, setDetails] = useState({});
	const handleAdd = () => {
		setDetails({});
		setDialogName("AttrViewModal");
	};
	function handleOk() {
		onCancel();
	}

	return (
		<CommonModal title={{ title: "维护分类属性" }} open={true} width="800px" footer={<></>} onCancel={onCancel}>
			<Button onClick={handleAdd} type="primary">
				新增属性
			</Button>
			<GoodsList
				key="id"
				attrList={props.attrList}
				getAttrList={props.getAttrList}
				setDialogName={setDialogName}
				setDetails={setDetails}
				{...props}
			/>
			{dialogName === "AttrViewModal" && (
				<AttrViewModal details={details} onOk={props.getAttrList} onCancel={() => setDialogName("")} />
			)}
			{/* <CommonLoading loading={loading} /> */}
		</CommonModal>
	);
}

export default MaintainClassificationAttributes;
